<template>
<!-- pages/index/thirdPage.wxml -->
<view class="body">
  <view v-for="(item, idx) in allServer" :key="idx" class="body-item">
    <button class="title" hover-class="btn" :open-type="item.ser_link_method == '1' ? 'contact' : ''" :data-index="idx" @tap="fiveBindTap">
      <image src="/static/pages/tools/images/third_icon.png" class="third-icon"></image>
      <text>{{item.ser_name}}</text>
    </button>
    <view class="ser-all">
      <view v-for="(item, index) in item.child" :key="index" class="ser-list">
        <button class="ser-list-item" hover-class="btn" :data-index1="idx" :data-index2="index" @tap="sixBindTap">
          <text>{{item.ser_name}}</text>
        </button>
      </view>
    </view>
  </view>
</view>
</template>

<script>
// pages/index/thirdPage.js
const app = getApp();
const util = require("../../../../utils/util.js");

export default {
  data() {
    return {
      allServer: "" // 全部服务

    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    let id = options.id;
    uni.setNavigationBarTitle({
      title: decodeURIComponent(options.title)
    });
    util.getUrl(app.globalData.url_new).then(res => {
      let $thirdPageServer = {
        ac: "allServer",
        flag: "getServer",
        type: app.globalData.platform,
        city: "sz",
        id
      };
      util.bstrequest('index.php', $thirdPageServer, "post").then(res => {
        let allServer = JSON.parse(JSON.stringify(res.data.allServer));
        this.setData({
          allServer
        });
      });
    });
  },

  onShareAppMessage() {
    return {
      imageUrl: "http://imgbdb3.bendibao.com/xcxbdb/file/20212/9/20210209161843_68677.jpg"
    };
  },

  methods: {
    fiveBindTap(e) {
      // 五级类目
      let index = e.currentTarget.dataset.index;
      let data = this.allServer[index];

      if (data.ser_link_method != '0') {
        util.click2NextProgram(data);
        util.clickNumber(data.id);
      }
    },

    sixBindTap(e) {
      let index1 = e.currentTarget.dataset.index1;
      let index2 = e.currentTarget.dataset.index2;
      let data = this.allServer[index1].child[index2]; // 办事日历

      if (data.id === "2997") {
        uni.navigateTo({
          url: '/pages/tools/calendar/index/index'
        });
        util.clickNumber(data.id, 2);
        return;
      } // 网点查询


      if (data.id === '3017') {
        uni.navigateTo({
          url: `/pages/tools/wangdian/index/index`
        });
        util.clickNumber(data.id, 2);
        return;
      } // 社保测算


      if (data.id === '3027') {
        uni.navigateTo({
          url: `/pages/tools/shebao/index/index`
        });
        util.clickNumber(data.id, 2);
        return;
      } // 名单查询


      if (data.id === '3007') {
        uni.navigateTo({
          url: '/pages/tools/listQuery/index/index'
        });
        util.clickNumber(data.id, 2);
        return;
      } // 公积金计算器


      if (data.id === "3053") {
        uni.navigateTo({
          url: '/pages/tools/loan/index/index'
        });
        util.clickNumber(data.id, 2);
        return;
      }

      if (data.ser_link_method != '0') {
        util.click2NextProgram(data);
        util.clickNumber(data.id);
        return;
      }
    }

  }
};
</script>
<style>
/* pages/index/thirdPage.wxss */
button {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: transparent;
    border-radius: 0;
}
button:after {
    border:0;
}

.body {
    padding: 45rpx;
}
.title {
    font-size: 36rpx;
    color: #232323;
    font-weight: bold;
    padding: 0;
}
.body-item {
    border-bottom: 2rpx solid #F5F5F5;
    padding-bottom: 34rpx;
}
.body .body-item:last-child {
    border-bottom: 0;
}
.third-icon {
    width: 23rpx;
    height: 23rpx;
    margin-right: 14rpx;
}
.ser-list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    font-size: 26rpx;
}
.ser-list {
    width: 33%;
    box-sizing: border-box;
    margin-bottom: 22rpx;
    white-space: nowrap;
}
.ser-list button {
    border-left: 4rpx solid #C2C2C2;
    margin: 0;
}
.ser-list-item text {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 26rpx;
    height: 36rpx;
    line-height: 36rpx;
}
.ser-all {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}
</style>